<template>
    <div class="body">
        <div class="top">
            <el-row :gutter="20">
                <el-col :span="25">
                    <div class="block">
                        <img src="@/assets/img/computer.png" class="pic" />
                        <div class="num">{{ topData.total }}</div>
                        <div class="title">消防设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #16b8a7">
                        <img src="@/assets/img/device.png" class="pic" />
                        <div class="num">{{ topData.online }}</div>
                        <div class="title">在线设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #aec0d3">
                        <img src="@/assets/img/warn.png" class="pic" />
                        <div class="num">{{ topData.offline }}</div>
                        <div class="title">离线设备数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #f5b01c">
                        <img src="@/assets/img/warning.png" class="pic" />
                        <div class="num">{{ topData.alarm }}</div>
                        <div class="title">发生报警设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #f02e2e">
                        <img src="@/assets/img/warning.png" class="pic" />
                        <div class="num">{{ topData.checkCount }}</div>
                        <div class="title">巡检次数</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="chart">
                    <div class="title">设备分类(单位：个)</div>
                    <div
                        class="chart-container"
                        id="chart-container"
                        ref="container"
                    ></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="chart">
                    <div class="title">消防设备区域分布统计</div>
                    <div
                        class="chart-container"
                        id="chart-container2"
                        ref="container2"
                        style="top: 70px"
                    ></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="chart">
                    <div class="title">报警分类</div>
                    <div
                        class="chart-container"
                        id="chart-container3"
                        ref="container3"
                        style="top: 70px"
                    ></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="chart">
                    <div class="title">报警分类趋势</div>
                    <div class="time-btn">
                        <el-radio-group
                            @change="changeTime"
                            v-model="radio"
                            size="mini"
                        >
                            <el-radio-button label="day">今日</el-radio-button>
                            <el-radio-button label="month"
                                >本月</el-radio-button
                            >
                            <el-radio-button label="year">本年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div
                        class="chart-container"
                        ref="container4"
                        style="top: 65px"
                    ></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="chart">
                    <div class="title">报警排名TOP10</div>
                    <div class="list">
                        <el-row>
                            <el-col :span="5"
                                ><div class="title-list">序号</div></el-col
                            >
                            <el-col :span="8"
                                ><div class="title-list">项目名称</div></el-col
                            >
                            <el-col :span="4"
                                ><div class="title-list">报警数</div></el-col
                            >

                            <el-col :span="4"
                                ><div class="title-list">故障数</div></el-col
                            >
                            <el-col :span="3"
                                ><div class="title-list">其他</div></el-col
                            >
                        </el-row>
                        <div class="list2">
                            <el-row
                                v-for="(item, index) in list"
                                :key="index"
                                style="margin-bottom: 8px"
                            >
                                <el-col :span="5"
                                    ><div class="title-list">
                                        {{ index + 1 }}
                                    </div></el-col
                                >
                                <el-col :span="8"
                                    ><div class="title-list">
                                        {{ item.device_name }}
                                    </div></el-col
                                >
                                <el-col :span="4"
                                    ><div class="title-list">
                                        {{ item.alarms }}
                                    </div></el-col
                                >

                                <el-col :span="4"
                                    ><div class="title-list">
                                        {{ item.breakdowns }}
                                    </div></el-col
                                >
                                <el-col :span="3"
                                    ><div class="title-list">
                                        {{ item.others }}
                                    </div></el-col
                                >
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    controlTop,
    getDeviceByType,
    getAlarmByType,
    getAlarmTrend,
    getAlarmTopTen,
    getWarnAreaStatistics,
} from "@/api/sendhttp/son";
export default {
    data() {
        return {
            radio: "day",
            topData: {},
            chart1Data: [],
            chart1Data2: [],
            chart2Data: [],
            chart2Data2: [],
            chart3Data: [],
            chart4Data: [],
            chart4Data2: [],
            chart4XData: [],
            myChart4: null,
            dy: "",
            list: [
                {
                    num: 1,
                    name: "主楼北门消防栓01",
                    alarm: 32,
                    danger: 0,
                    accident: 0,
                    warn: 0,
                },
            ],
        };
    },
    mounted() {
        this.topBar();
        this.chart2();
        this.getChart1();
        this.getChart2();
        this.getChart3();
        this.getChart4();
        this.rankingList();
    },
    watch: {
        // chart4XData(val) {
        //     console.log(4444, val);
        //     this.chart4();
        // },
    },
    methods: {
        rankingList() {
            getAlarmTopTen().then((res) => {
                console.log(res);
                const { code, data, msg } = res.data;
                if (code == 200) {
                    this.list = data;
                } else {
                    this.$message.error(msg);
                }
                // this.list = res.data.data.map((item) => {
                //     return {
                //         num: item.device_id,
                //         name: "",
                //         alarm: item.count,
                //         danger: "",
                //         accident: "",
                //         warn: "",
                //     };
                // });
                console.log(this.list);
            });
        },
        changeTime() {
            if (this.radio == "day") {
                this.dy = "时";
            } else if (this.radio == "month") {
                this.dy = "日";
            } else if (this.radio == "year") {
                this.dy = "月";
            }
            this.getChart4();
        },
        getChart4() {
            getAlarmTrend(this.radio).then((res) => {
                const { code, data, msg } = res.data;
                if (code == 200) {
                    this.chart4Data.splice(0);
                    this.chart4XData.splice(0);
                    this.chart4Data2.splice(0);
                    if (Object.keys(data).length !== 0) {
                        data.date.forEach((item) => {
                            this.chart4XData.push(item);
                        });
                        let datas = data.data;
                        for (let i = 0; i < datas.length; i++) {
                            this.chart4Data.push(datas[i].name);
                            this.chart4Data2.push({
                                name: datas[i].name,
                                type: "line",
                                data: datas[i].value,
                                smooth: true,
                                label: {
                                    show: true,
                                    position: "top",
                                    // color: color[i],
                                },
                            });
                            // console.log("chart4Data2", this.chart4Data2);
                        }
                    } else {
                        this.chart4Data.splice(0);
                        this.chart4XData.splice(0);
                        this.chart4Data2.splice(0);
                    }
                    this.chart4();
                } else {
                    this.$message({
                        message: msg,
                        type: "error",
                    });
                }
            });
        },
        getChart3() {
            getAlarmByType().then((res) => {
                let chart3Data = [];
                for (let key in res.data.data) {
                    chart3Data.push({ name: key, value: res.data.data[key] });
                }
                this.chart3Data = chart3Data.map((item) => {
                    return {
                        name: item.value.alarm_type,
                        value: item.value.count,
                    };
                });
                this.chart3();
            });
        },

        getChart2() {
            getWarnAreaStatistics().then((res) => {
                this.chart2Data = res.data.data.map((item) => {
                    return item.num;
                });
                this.chart2Data2 = res.data.data.map((item) => {
                    return item.site_name;
                });
                this.chart2();
            });
        },
        getChart1() {
            getDeviceByType().then((res) => {
                this.chart1Data = res.data.data.map((item) => {
                    return item.count;
                });
                this.chart1Data2 = res.data.data.map((item) => {
                    return item.device_name;
                });
                this.chart();
            });
        },
        topBar() {
            controlTop().then((res) => {
                this.topData = res.data.data;
            });
        },
        chart() {
            // var dom = document.getElementById("chart-container");
            // var myChart = this.$echarts.init(dom, null, {
            //     renderer: "canvas",
            //     useDirtyRect: false,
            // });
            // var app = {};
            let container = this.$refs.container;
            let myChart = this.$echarts.getInstanceByDom(this.$refs.container);
            if (myChart == null) {
                myChart = this.$echarts.init(container);
            }

            var option;

            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                },
                yAxis: {
                    type: "category",
                    data: this.chart1Data2,
                },
                series: [
                    {
                        type: "bar",
                        itemStyle: {
                            color: "#58A55C",
                        },
                        data: this.chart1Data,
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },

        chart2() {
            let container2 = this.$refs.container2;
            let myChart = this.$echarts.getInstanceByDom(this.$refs.container2);
            if (myChart == null) {
                myChart = this.$echarts.init(container2);
            }

            var option;

            const xAxis = {
                type: "category",
                data: this.chart2Data2,

                axisLabel: {
                    show: true,
                    rotate: 45,
                    formatter: function (value) {
                        let result = "";
                        for (let i = 0; i < value.length; i += 8) {
                            result += value.substring(i, i + 8) + "\n";
                        }
                        return result;
                    },
                    // rotate: 45,
                    // fontSize: 10,
                    // margin: 10,
                },
            };
            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                xAxis: xAxis,
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 60,
                },
                series: [
                    {
                        color: "#68bbc4",
                        barWidth: "20%",
                        data: this.chart2Data,
                        type: "bar",
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },

        chart3() {
            let container3 = this.$refs.container3;
            let myChart = this.$echarts.getInstanceByDom(this.$refs.container3);
            if (myChart == null) {
                myChart = this.$echarts.init(container3);
            }

            var option;

            option = {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "2%",
                    left: "center",
                    textStyle: {
                        color: "#000000",
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["40%", "70%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 18,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: this.chart3Data,
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },

        chart4() {
            let container4 = this.$refs.container4;
            var chartDom = container4;
            if (this.myChart4) {
                this.myChart4.dispose();
            }
            this.myChart4 = this.$echarts.init(chartDom);
            // let myChart = this.$echarts.getInstanceByDom(this.$refs.container4);
            // if (myChart == null) {
            //     myChart = this.$echarts.init(container4);
            // }
            let option;

            option = {
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.chart4Data,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    name: this.dy,
                    data: this.chart4XData ? this.chart4XData : [],
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 250,
                },
                // color: ["#777777", "#7dc2cd", "#ff3232", "#ffcf48"],
                series: this.chart4Data2 ? this.chart4Data2 : [],
            };

            option && this.myChart4.setOption(option);
            window.addEventListener("resize", function () {
                this.myChart4.resize();
            });
            // option && myChart.setOption(option);
            // window.addEventListener("resize", function () {
            //     myChart.resize();
            // });
            this.chart4Data2 = [];
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.chart-container {
    position: absolute;
    top: 30px;
    width: 100%;
    height: 364px;
    overflow: hidden;
    margin: auto;
}
.top {
    width: 100%;
    margin: auto;
}
.block {
    width: 100%;
    height: 70px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #56a3ee;
    text-align: center;
    position: relative;
    img {
        width: 30px;
        height: 30px;
    }
}
.pic {
    position: absolute;
    top: 20px;
    left: 3%;
}
.num {
    position: absolute;
    right: 3%;
    top: 20px;
    color: rgba(255, 254, 232, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.title {
    position: absolute;
    right: 3%;
    top: 45px;
    color: rgba(255, 254, 232, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
::v-deep .el-col-25 {
    width: 20%;
}
.time-btn {
    position: absolute;
    right: 20px;
    top: 20px;
}
.chart {
    position: relative;
    margin: auto;
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 180px;
        height: 24px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
    .button {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 81px;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(187, 187, 187, 1);
    }
}
.list {
    position: relative;
    top: 60px;
    // height: 423px;
    width: 100%;
}
.list2 {
    width: 100%;
    height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}
.list2::-webkit-scrollbar {
    display: none;
}
.list2 {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.title-list {
    line-height: 30px;
    width: 82%;
    height: 30px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
}
</style>
